<template>
  <div class="aaa">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="设备名称">
        <el-select v-model="form.deviceName" placeholder="请选择设备名称">
        </el-select>
      </el-form-item>
<el-form-item label="设备所属车间">
        <el-select v-model="form.deviceWorkshop" placeholder="请选择车间">
        </el-select>
      </el-form-item>
      <el-form-item label="点检位置">
        <el-input v-model="form.deviceCheckPosition" style="width: 215px;"></el-input>
      </el-form-item>
      <el-form-item label="点检人">
        <el-input v-model="form.deviceCheckman" style="width: 215px;"></el-input>
      </el-form-item>
      <el-form-item label="点检类型">
        <el-input v-model="form.checkType" style="width: 215px;"></el-input>
      </el-form-item>>
      <el-form-item label="点检照片">
        <image-upload v-model="form.checkPicture" />
      </el-form-item>
      <el-form-item label="点检描述">
        <el-input type="textarea" v-model="form.checkResult" style="width: 215px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" style="margin-left: 200px;">提交</el-button>
      </el-form-item>
    </el-form>

    <div class="o">
      <h3>点检展示</h3>
      <div id="down">
        <el-table v-loading="loading" :data="postList" :model="queryParams" border style="width: 100%;"
          :header-cell-style="{background:'#409eff',color:'#ffffff'}">
         <el-table-column label="设备名称" align="center" prop="deviceName" />
         <el-table-column label="设备所属车间" align="center" prop="deviceWorkshop" width="100"/>
         <el-table-column label="点检位置" align="center" prop="deviceCheckPosition"/>
         <el-table-column label="点检人" align="center" prop="deviceCheckman"/>
        </el-table>
      </div>
      <div id="down" style="margin-top: 20px;">
        <el-table v-loading="loading" :data="postList" :model="queryParams" border style="width: 100%;"
          :header-cell-style="{background:'#409eff',color:'#ffffff'}">
         <el-table-column label="点检类型" align="center" prop="checkType" width="80" />
          <el-table-column label="点检照片" align="center" prop="checkPicture" width="100">
            <template slot-scope="scope">
              <image-preview :src="scope.row.checkPicture" :width="50" :height="50" />
            </template>
          </el-table-column>
         <el-table-column label="点检描述" align="center" prop="checkResult" width="165"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    checkAdd,
    checkList
  } from '@/api/system/from.js'
  export default {
    data() {
      return {
        form: {
          deviceName: '放蜡柱机',
          deviceWorkshop: '发泡蜡车间一',
          deviceCheckPosition: '',
          deviceCheckman: '',
          checkType: '',
          checkPicture: '',
          checkResult: '',
          checkTime: ''
        },
        loading: true,
        postList: [],
        queryParams: {
          deviceName: null,
          deviceWorkshop: null,
          deviceCheckPosition: null,
          deviceCheckman: null,
          checkType: null,
          checkPicture: null,
          checkResult: null,
          checkTime: null
        },
      }
    },
    created() {
      this.getList();
    },
    methods: {
      onSubmit() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
             updateCheck(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
             });
           } else {
             checkAdd(this.form).then(response => {
               this.$modal.msgSuccess("提交成功");
               this.open = false;
             });
           }
         }
       });
      },
      getList() {
        this.loading = true;
        checkList(this.queryParams).then(response => {
          this.postList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
    }
  }
</script>

<style>
  #down {
    float: left;
    margin-left: 20px;
  }
  h3{
    text-align: center;
    font-size: 25px;
    color: #6280c6;
  }
</style>
